import { StyleSheet } from "react-native";

export const createStyles = () =>
  StyleSheet.create({
    container: {
      flex: 1,
    },
    listContainer: {
      paddingVertical: 8,
    },
    notificationItem: {
      flexDirection: "row",
      padding: 16,
      position: "relative",
      overflow: "visible", // 确保丝带可以显示在外部
    },
    unreadDot: {
      width: 10,
      height: 10,
      borderRadius: 5,
      position: "absolute",
      top: 8,
      right: 8,
      zIndex: 10,
    },
    // 45度倾斜的丝带标签样式
    actionResultTag: {
      position: "absolute",
      top: 5,
      right: -15,
      width: 60,
      height: 28,
      justifyContent: "center",
      alignItems: "center",
      transform: [{ rotate: "45deg" }],
      zIndex: 10,
    },
    actionResultText: {
      fontSize: 12,
      fontWeight: "bold",
      color: "#FFFFFF",
      textAlign: "center",
      textShadowColor: "rgba(0, 0, 0, 0.3)",
      textShadowOffset: { width: 1, height: 1 },
      textShadowRadius: 1,
    },
    groupAvatar: {
      width: 50,
      height: 50,
      borderRadius: 25,
    },
    iconContainer: {
      width: 50,
      height: 50,
      borderRadius: 25,
      justifyContent: "center",
      alignItems: "center",
    },
    notificationContent: {
      flex: 1,
      marginLeft: 12,
      justifyContent: "center",
      paddingRight: 14,
    },
    notificationText: {
      fontSize: 15,
      marginBottom: 8,
      paddingRight: 4,
    },
    // 申请理由容器样式
    reasonContainer: {
      backgroundColor: "rgba(0, 0, 0, 0.03)",
      padding: 8,
      borderRadius: 6,
      marginBottom: 8,
    },
    reasonLabel: {
      fontSize: 12,
      fontWeight: "500",
      marginBottom: 2,
    },
    reasonText: {
      fontSize: 13,
      lineHeight: 18,
    },
    timestamp: {
      fontSize: 12,
      color: "#999",
    },
    // 底部行，用于放置时间戳和操作按钮
    bottomRow: {
      flexDirection: "row",
      justifyContent: "space-between",
      alignItems: "center",
      marginTop: 4,
    },
    // 水平排列的按钮组
    actionButtonsRow: {
      flexDirection: "row",
    },
    actionButton: {
      paddingVertical: 6,
      paddingHorizontal: 12,
      borderRadius: 4,
      marginRight: 8,
      alignItems: "center",
    },
    actionButtonText: {
      color: "#FFFFFF",
      fontSize: 14,
    },
    loadingContainer: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
    },
    loadingText: {
      marginTop: 12,
      fontSize: 16,
    },
    emptyContainer: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
    },
    emptyText: {
      marginTop: 16,
      fontSize: 16,
    },
  });
